<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    /* 
        解构赋值
    */
    const arr = ["悟空", "八戒", "唐僧"];
    let a, b, c;
    [a, b, c] = arr; //解构赋值
    console.log(a, b, c);

    [d, e, f, g] = [1, 2, 3];
    console.log(d, e, f, g); // g 未赋值，默认值 undefined
    [d, e, f = 77, g = 10] = [1, 2]; //如果 f，g 未赋值，则默认值 77，10
    console.log(d, e, f, g);
    [d, e, f = 77, g = g] = [3, 4]; //如果 f，g 未赋值，则f默认值 77，g 的值 还是等于g
    console.log(d, e, f, g);

    let [n1, n2, n3, n4, ...args] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    console.log(n1, n2, n3, n4, args); // 解构赋值时，可以通过...来设置获取多余的元素

    function fn1() {
      return ["八戒", "唐僧", "悟空"];
    }
    let [a1, b1, c1] = fn1();
    console.log(a1, b1, c1); // 解构赋值时，可以直接从函数返回值中获取值
    let q1 = 10;
    let q2 = 20;
    [q1, q2] = [q2, q1];
    console.log(q1, q2); // 交换两个变量的值
    /* 
        数组中可以存储任意类型的数据，也可以存数组，
            如果一个数组中的元素还是数组，则这个数组我们就称为是二维数组
    */
    const arr3 = [
      ["悟空", 18, "男"],
      ["猪八戒", 28, "男"],
    ];
    for (let val of arr3) {
      for (let v of val) {
        console.log(v);
      }
    }
    let [[name, age, gender],ar] = arr3
    console.log(name,age,gender,ar);
  </script>
</html>
